<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <title>JavaScript で数秘術</title>
        
        <style>
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
                font-family: "Meiryo", Arial, Helvetica, sans-serif;
                line-height: 1.7em;
            }
            
            body {
                font-size: 12px;
            }
            
            #result {
                margin-left: 40px;
            }
            
            #numerology {
                padding: 5px;
                font-size: 25px;
                color: hsl(240, 100%, 50%);
            }
            
            #summary {
                box-shadow: 0px 0px 4px 0px #aaa;
                padding: 10px;
                width: 600px;
            }
            
            #summary section:target {
                opacity: 1.0;
            }
            #summary section:not(:target) {
                display: none;
            }
            #twitter {
                margin-left: 40px;
            } 
        </style>
        
        <script>
            
            var CHARACTER = {
                1: "才能も運もあるがハートが弱く小心者.",
                2: "頭がよく直感も働くが短気で人からあれこれ言われたくない.",
                3: "面倒見がよく芸術センスもあるがストレスをためやすい.",
                4: "働き者でリーダーシップがあるがクールで人間味がない.",
                5: "マイペースで安定志向だが恋愛下手.",
                6: "八方美人で愛情深いが裏切りを許さない.",
                7: "お調子者でぱわふるだがデリケートで傷つきやすい.",
                8: "こだわりが強く金運もあるがものの考え方が極端.",
                9: "記憶力がよく天才肌だが寂しがりや一番浮気しやすい.",
                11: "めずらしい人.",
                22: "めずらしい人.",
                33: "めずらしい人.",
                44: "めずらしい人.",
            };
            
            window.onload = function() {
                calc();
            };
            
            var calc = function() {
                var result = document.getElementById("result");
                var year   = document.getElementById("year").value;
                var month  = document.getElementById("month").value;
                var date   = document.getElementById("date").value;
                var number = year + month + date;
                number = calcSoulNumber(number);
                
                result.innerHTML = "あなたのソウル・ナンバーは<strong id='numerology'>" + number + "</strong>です.";
                location.hash = number;
            };
            
            var calcSoulNumber = function(numbers) {
                var n = 0;
                for (var i=0,len=numbers.length; i<len; ++i) {
                    n += Number(numbers[i]);
                }
                
                numbers = n.toString();
                if (numbers.length > 1 && !(numbers.length == 2 && numbers[0] == numbers[1])) {
                    return calcSoulNumber(numbers);
                }
                
                return n;
            };
            
            var EUC = encodeURIComponent;
            var TWITTER_URL = "http://twitter.com/?status=";
            var tweet = function() {
                var number = location.hash.substr(1);
                var number_msg      = "あなたのソウル・ナンバーは '" + number + "' です.";
                var character_msg   = "特徴は『" + CHARACTER[number] + "』";
                var blog_url        = "http://tmlife.net/programming/javascript/javascript-numerology.html";
                var hash_tag        = "#javascript #数秘術";
                var message = [number_msg, character_msg, blog_url, hash_tag].join("\n");
                window.open(TWITTER_URL + EUC(message));
            };
            
        </script>

    </head>
    
    <body>
        <h1>JavaScript で数秘術</h1>
        <p>
            JavaScript でソウルナンバーを計算するプログラムを作ってみました.
        </p>
        
        <section>
            <h2>Form</h2>
            <p>
                誕生日 :
                <input id="year"  type="number" value="1988" min="1800" max="2100" onchange="calc();" />年
                <input id="month" type="number" value="09" min="1" max="12" onchange="calc();" />月
                <input id="date"  type="number" value="16" min="1" max="31" onchange="calc();" />日
            </p>
        </section>
        
        <section>
            <h2>Result</h2>
            <div id="result"></div>
            <blockquote id="summary" cite="http://homepage.mac.com/yumibox/tarotkingdom/m_soulno.html">
                <section id="1">
                    <h3>1.「力の魔術師」 Magus</h3>
                    <p>
                        コミュニケーションを必要とする分野での才能が抜群の方です。
                        グッド・タイミングと的確なコミュニケーションによって、人を励まし、人にやる気をおこさせる、生まれながらの能力がある人です。
                        明るくて、ポジティブ志向。
                        ただし、他人に合わせてばかりいると自分の個性をなくしがちになりやすいでしょう。 
                        創造性と行動力を発揮することで、チャンスを掴んでいけるでしょう。
                    </p>
                </section>
                <section id="2">
                    <h3>2.「月の女神」 Priestess</h3>
                    <p>
                        生活、人間関係でのバランス、調和を重んじる人です。
                        大変頭がよく、判断力やタイミングのはかりかたが優れています。
                        人と人の仲介役に適役！
                        独立心が際立っているので、フリーでやる事にも適しています。
                        女性は、さっぱりしていてややセクシャルな面にかけるでしょう。
                    </p>
                </section>
                <section id="3">
                    <h3>3.「愛の天使」 Empress</h3>
                    <p>
                        とても社交力に優れ、やさしい人です。
                        他人の世話をし、育てたりする抜群の能力。
                        他人の世話をやくのに応じて、自己成長することができるでしょう。
                        又、停滞している状況を再生、再建できる人です。 
                        内面に強情・わがままさを隠しているかも。
                    </p>
                </section>
                <section id="4">
                    <h3>4.「太陽の王」 Emperor</h3>
                    <p>
                        リーダーシップで人を励まし、意欲を喚起する。
                        組織やプロジェクトのリーダー、更に独立事業家や創業者向き。
                        行動的で他人の面倒見が良い人です。
                        周囲に「自分と同等の能力や強さ」を持つ人を集める事が大切です。
                        さもないと「井の中の蛙」となりがちです。 
                        ただし、自分でリーダータイプではないと思う人は、
                        外見おとなしく内向的なタイプでしょう。
                        しかし、内心は影響力を与えたいと思っているふしがあります。
                    </p>
                </section>
                <section id="5">
                    <h3>5.「光の司祭」 Hierophant</h3>
                    <p>
                        私生活も仕事上の組織も家庭的な関係を求めるタイプ。
                        真面目な人柄で自分の事より全体のことを優先させようとする。
                        学ぶこと教えることに関係する人が多い。
                        想像的な芸術に興味を持ち、自分の創造力を様々な形で表わそうとする。
                        音感に優れ、ミュージシャンやボーカリストとしての素質がある。
                        やや自分の理想に固執し、頑固な一面があるので柔軟性をもつことが必要です。
                        とくに、結婚に対しての理想はほどほどに！
                    </p>
                </section>
                <section id="6">
                    <h3>6.「天上の婚姻」 Lovers</h3>
                    <p>
                        人との付き合いがうまく、社交的！
                        人脈づくりが巧みであり、人間関係をうまく利用することによって成功するタイプ。
                        あらゆる世代の人々を理解し、励ます能力を持っています。
                        互恵主義者で、性格は陽気でユーモアのセンスに優れています。
                        楽しい事が大好き。コツコツやる仕事は向いてないでしょう。
                        好奇心旺盛ですが、集中力に欠けるので、あれもこれも出来るけど・・・ で終わらないように。プロになる為には「これ！」と いうものを身につけることが大事でしょう。
                        集中力がポイントです。　
                    </p>
                </section>
                <section id="7">
                    <h3>7.「天空の覇者」 Chariot</h3>
                    <p>
                        大変優しく、家庭的な持ち主です。
                        理想家であり、自分の目的に合うものはとことんよく学び、必要な知識や技術を身につけようとするでしょう。それ以外のことには関心を持たない場合が多いでしょう。
                        自分の目指した分野であれば、誰よりもナンバー１になりたいという意欲が強いし、出来る人です。
                        「やり手」と「繊細さ」が同時に存在している人です。
                        感情的にはとてももろく、傷つきやすい一面を持っています。
                        突っ張らずに、できるだけ自分の気持ちに素直に生きる事が、余計な障害や誤解から救われる事になります。
                    </p>
                </section>
                <section id="8">
                    <h3>8.「真理の娘」 Adjustment</h3>
                    <p>
                        非常に純粋な性質であり、それは霊肉一致の愛情を求めること、人間関係では損得抜きの関係を求めるタイプです。
                        ともすると、「全てを信じるか、全てを否定するか」になりやすい点には気をつけましょう。複雑な人間関係の中や苦労して成り上がらなければならない仕事の中では埋没しやすい。
                        知的、教養の匂いが強い環境を必要とします。
                        体質的には泥臭くなれず、攻撃的には生きられない平和主義者でしょう。
                        ただし、よく信用され、責任ある立場に立たされると、実力以上の能力を発揮するでしょう。
                    </p>
                </section>
                <section id="9">
                    <h3>9.「時空の賢者」 Hermit</h3>
                    <p>
                        寂しがりやな面と、一人になりたがる面との両面を持つ人です。 
                        表面的には、つかみどころがなく、「何を考えている人か解らない」と思われがち。
                        そこが魅力的に見られたりもします。
                        しかし、よく知ると、「とっても素直で優しい人」です。 
                        自由な行動を好み、人に束縛されることを嫌う。
                        また、甘え上手なところがあり、人には大変恵まれ 、協力者や援助者が不思議と出て来るでしょう。
                        あなたの場合は、いやすい環境が大事です。
                        上司からほめられたり、大事に扱われると、自分の得意なものでは、誰よりも人一倍抜きん出る才能を持っています。
                    </p>
                </section>
                <section id="11">
                    <h3>ゴメンなさい. ゾロ目は非対応です.</h3>
                    <p>
                        なんだか珍しいらしいですよ♪♪
                    </p>
                </section>
                <section id="22">
                    <h3>ゴメンなさい. ゾロ目は非対応です.</h3>
                    <p>
                        なんだか珍しいらしいですよ♪♪
                    </p>
                </section>
                <section id="33">
                    <h3>ゴメンなさい. ゾロ目は非対応です.</h3>
                    <p>
                        なんだか珍しいらしいですよ♪♪
                    </p>
                </section>
                <section id="44">
                    <h3>ゴメンなさい. ゾロ目は非対応です.</h3>
                    <p>
                        なんだか珍しいらしいですよ♪♪
                    </p>
                </section>
            </blockquote>
            
            <section id="twitter">
                <h3>Twitter</h3>
                <p>
                    結果をツイートしよう♪
                    <button onclick="tweet();">Tweet</button>
                </p>
            </section>
        </section>
        
        <footer>
            <p>
                <a href="http://tmlife.net/programming/javascript/javascript-numerology.html">ブログも見てね♪</a>
            </p>
        </footer>
    </body>
</html>
